<template>
  <div class="error-pool-bg">
    <NormalForm :operateForm="operateForm" :formList="formList" :enumOpt="enumOpt"></NormalForm>
    <el-card class="my-normal-table-bg">
      <div slot="header" class="page-title">
        <div class="title-icon"></div>
        <span>查询结果</span>
      </div>
      <el-table ref="myTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="保单号" prop="contNo" align="center" min-width="160"></el-table-column>
        <el-table-column label="异常类型" prop="errorType" align="center" min-width="160"></el-table-column>
        <el-table-column label="渠道" prop="groupType" align="center" min-width="80"></el-table-column>
        <el-table-column label="交次" prop="payTimes" align="center" min-width="80"></el-table-column>
        <el-table-column label="保单状态" prop="contState" align="center" min-width="100"></el-table-column>
        <el-table-column label="行政区域" prop="area" align="center" min-width="140"></el-table-column>
        <el-table-column label="业务员" prop="casher" align="center" min-width="120"></el-table-column>
        <el-table-column label="业务员状态" prop="casherState" align="center" min-width="100">
          <template slot-scope="scope">
            <div :class="{'cont-state': true, 'cont-state-a': scope.row.casherState == '在职', 'cont-state-b': scope.row.contState == '离职' }">{{ scope.row.contState }}</div>
          </template>
        </el-table-column>
        <el-table-column label="业务员联系方式" prop="casherPhone" align="center" min-width="160"></el-table-column>
        <el-table-column label="投保人姓名" prop="customerName" align="center" min-width="160"></el-table-column>
        <el-table-column label="投保人联系方式" prop="customerPhone" align="center" min-width="160"></el-table-column>
        <el-table-column label="保单联系地址" prop="address" align="center" min-width="320"></el-table-column>
        <el-table-column label="操作" align="center" width="260">
          <template>
            <el-button type="text" size="mini">查看保单详情</el-button>
            <el-button type="text" size="mini">分单地址变更</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import NormalForm from "../components/normalForm.vue";

export default {
  name: 'ErrorPool',
  components: {
    NormalForm
  },
  data() {
    return {
      // 表单
      operateForm: {
        monthList: null,
        groupType: '',
        payTimes: '',
        errorType: ''
      },
      formList: [
        {
          label: '渠道',
          value: null,
          prop: 'groupType',
          type: 'SELECT',
          emunName: 'groupList'
        },
        {
          label: '交次',
          value: null,
          prop: 'payTimes',
          type: 'SELECT',
          emunName: 'payTimesList'
        },
        {
          label: '异常类型',
          value: null,
          prop: 'errorType',
          type: 'SELECT',
          emunName: 'errorTypeList'
        },
        {
          label: '应交月',
          value: null,
          prop: 'monthList',
          type: 'MONTH_RANGE',
          emunName: null
        },
      ],
      enumOpt: {
        groupList: [
          { label: '个险', value: '1' },
          { label: '银保', value: '2' },
          { label: '创新', value: '3' },
        ],
        payTimesList: [
          { label: '一次', value: '1' },
          { label: '二次', value: '2' },
          { label: '三次', value: '3' },
          { label: '四次及以上', value: '4' },
        ],
        errorTypeList: [
          { label: '地址不明确保单', value: '1' },
          { label: '地址异常保单', value: '2' },
          { label: '不存在保单', value: '3' },
        ]
      },
      // 表格
      tableData: [
      	{
          contNo: '0000022215221818',
          errorType: '地址不明确保单',
          groupType: '个险',
          payTimes: '3/5年',
          contState: '有效',
          area: '江苏省无锡市市辖区',
          casher: '季钰芳组',
          casherState: '在职',
          casherPhone: '18078458555',
          customerName: '赵小北',
          customerPhone: '18015112202',
          address: '江苏省无锡市市辖区宜兴市宜城街道茶东新村91好号401',
        },
        {
          contNo: '0000022415541818',
          errorType: '地址不明确保单',
          groupType: '个险',
          payTimes: '2/10年',
          contState: '有效',
          area: '江苏省无锡市崇安区',
          casher: '朱巍',
          casherState: '在职',
          casherPhone: '18109545619',
          customerName: '张明',
          customerPhone: '18041516305',
          address: '江苏省无锡市崇安区长庆路75号101室',
        },
        {
          contNo: '0000022515701818',
          errorType: '地址不明确保单',
          groupType: '个险',
          payTimes: '6/10年',
          contState: '有效',
          area: '江苏省无锡市南长区',
          casher: '乔东方',
          casherState: '在职',
          casherPhone: '18146709380',
          customerName: '王晓',
          customerPhone: '18042060379',
          address: '江苏省无锡市南长区水沟头22号',
        },
        {
          contNo: '0000022615861818',
          errorType: '地址不明确保单',
          groupType: '个险',
          payTimes: '2/15年',
          contState: '有效',
          area: '江苏省无锡市南长区',
          casher: '李燕',
          casherState: '在职',
          casherPhone: '18082949080',
          customerName: '腾子画',
          customerPhone: '18045021535',
          address: '江苏省无锡市南长区沁园新村242-6-302',
        },
      ],
    }
  },
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.my-normal-table-bg {
  padding: 16px;
  margin-top: 20px;
  .page-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2a2a2a;
    margin-left: 10px;
    .title-icon {
      width: 8px;
      height: 22px;
      background-color: #082aff;
      margin-right: 10px;
    }
  }
  .cont-state {
    display: inline-block;
    width: 60px;
    text-align: center;
    padding: 2px 0;
    font-size: 12px;
  }
  .cont-state-a{
    color: #33C7C8;
    background-color: #E7FFFB;
  }
  .cont-state-b{
    color: #fff;
    background-color: #ff0000b1;
  }
  ::v-deep.el-card__header {
    padding: 8px 0 10px 0;
    border: 0;
  }
}
</style>
